<template>
  <main>
    <div class="warp">
      <span v-for="(item, i) in list" :key="i" @click="toPage(item)" :style="getStyle()">{{ item.includes("http") ? item.split("|")[0] : item }}</span>
    </div>
  </main>
</template>

<script>
import service from "../../common/api.js";
import { showImagePreview } from "vant";
var res;
var all = `
前端印记|https://www.htmltrip.com,
前端进阶之旅|https://interview.poetries.top,
AUX,DevUI,layer-vue,layer,Antd,element,element-plus,react,vue,mui,weui,vant2,编程导航,
vcc|https://vcc.sahadev.tech,
markdown|http://coolaf.com/tool/md,
uview|iview,
vxe-table,handsontable,
Three.js|http://www.webgl3d.cn/Three.js,
antv|https://antv.vision/zh,
vant|https://vant-contrib.gitee.io/vant/v2/#/zh-CN/,
nutui|https://nutui.jd.com,
naiveui|https://www.naiveui.com,
cursor
`;
export default {
  template: ``,
  data() {
    return { list: [] };
  },
  async created() {
    var res = await service.post("/link/api/info", {});
    if (res.info) {
      all = info;
    }
    this.list = all
      .trim()
      .split(",")
      .sort((a, b) => a.toLowerCase() - b.toLowerCase());
  },
  methods: {
    getStyle() {
      var color = "#" + Math.floor(Math.random() * 16777215).toString(16);
      return `border: 1px solid ${color};color:${color}`;
    },
    toPage(item) {
      window.open(item.includes("http") ? item.split("|")[1] : `https://www.baidu.com/s?wd=${item} 官网`);
    },
    save() {
      this.imgs = tmp;
      service.post("/link/api/info", { info: this.info }); 
    },
  },
};
</script>

<style scoped>
html {
  background: #eee;
}
.warp {
  cursor: pointer;
  font-size: 12px;
}
.warp span {
  display: inline-block;
  padding: 2px 5px;
  margin: 5px;
  border-radius: 50px;
}
.warp span:hover {
  transform: scale(1.2);
}
</style>
